<template>
    <a-layout>
        <HeaderBar></HeaderBar>
        <a-layout-content :style="{ padding: '0 50px', marginTop: '64px' }" ref="content">
            <a-breadcrumb :style="{ margin: '16px 0' }">
                <a-breadcrumb-item :key="path.name" v-for="path in paths">
                    <router-link :to="path.link" v-if="path.link">{{path.name}}</router-link>
                    <span v-else>{{path.name}}</span>
                </a-breadcrumb-item>
            </a-breadcrumb>
            <div :style="{ background: '#fff', padding: '24px', minHeight: '380px' }">
                <router-view @changePaths="changePaths"></router-view>
            </div>
        </a-layout-content>
        <a-layout-footer :style="{ textAlign: 'center' }">
            {{globalConfig.footer}}
        </a-layout-footer>
        <a-back-top/>
    </a-layout>
</template>

<style>
    body {
        overflow: auto;
        min-width: 1200px;
    }
</style>

<script>
    // 按需加载
    import {BackTop, Breadcrumb, Layout} from "ant-design-vue";
    import HeaderBar from "./components/HeaderBar";

    export default {
        name: 'App',
        components: {
            ALayout: Layout,
            ALayoutContent: Layout.Content,
            ALayoutFooter: Layout.Footer,
            ABreadcrumb: Breadcrumb,
            ABreadcrumbItem: Breadcrumb.Item,
            ABackTop: BackTop,

            HeaderBar,
        },
        data() {
            return {
                paths: []
            }
        },
        methods: {
            changePaths: function (paths) {
                this.paths = paths;
            }
        }
    }
</script>
